<template>
  <div>
    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/index" replace>
        <span>主页</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.active : icon.inactive"
        />
      </van-tabbar-item>
      <van-tabbar-item to="/message" replace style="position: relative">
        <div class="hd" v-if="dx.length > 0"></div>
        <span>消息</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon2.active : icon2.inactive"
        />
      </van-tabbar-item>
      <van-tabbar-item to="/address" replace>
        <span>通讯</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon3.active : icon3.inactive"
        />
      </van-tabbar-item>
      <van-tabbar-item to="/me" replace>
        <span>我</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon4.active : icon4.inactive"
        />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      userId: "",
      dx: [],
      icon: {
        active: require("../assets/images/tabbar_home_active.png"),
        inactive: require("../assets/images/tabbar_home.png"),
      },
      icon2: {
        active: require("../assets/images/tabbar_msg_active.png"),
        inactive: require("../assets/images/tabbar_msg.png"),
      },
      icon3: {
        active: require("../assets/images/call_active.png"),
        inactive: require("../assets/images/call.png"),
      },
      icon4: {
        active: require("../assets/images/tabbar_user_active.png"),
        inactive: require("../assets/images/tabbar_user.png"),
      },
    };
  },
  created() {
    this.userId = localStorage.getItem("userId"); //获取访问id
    this.info();
  },
  methods: {
    info() {
      //获取数据
      // try {
      //   plus.nativeUI.showWaiting("正在加载...");
      // } catch (e) {
      //   console.log("plus问题");
      // }
      this.axios
        .get(
          `${this.$global_msg.Url.hosts}/Information/selectInformation?userId=${this.userId}&page=1&num=10`
        )
        .then((res) => {
          console.log(res)
          if(res.data.code == 200){
          var lislength = res.data.rows.list;
          for (let i = 0; i < lislength.length; i++) {
            // console.log(res.data.rows.list[i].status);
            if (lislength[i].status == 2) {
              this.dx.push(lislength[i].id);
            }
          }
          }else{
            // this.$toast(res.data.msg)
          }
          // this.dx=arr.join()
          console.log(this.dx.length);
        }).catch( err=>{
            // this.$terminal._error(err)
        })
    },
  },
  watch: {
    active(i, ii) {
      sessionStorage.setItem("showed", 1);
    },
  },
};
</script>
<style scoped>
.van-tabbar {
  padding: 0.4rem 0;
}
.van-tabbar--fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ffffff;
}
.van-tabbar--fixed {
  border-top: 1px solid #070707;
  border: none;
  padding-top: 0.8rem;
}
.van-tabbar-item {
  font-size: 0.44rem;
  line-height: 0.6rem;
}
.van-tabbar-item__icon img {
  display: block;
  height: 0.5333rem;
}
[class*="van-hairline"]::after {
  border: none;
}
.hd {
  width: 0.204074rem;
  height: 0.204074rem;
  position: absolute;
  background: red;
  right: 0.8rem;
  bottom: 0.7rem;
  border-radius: 50%;
}
</style>
